<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/21
  Time: 2:12 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>mac首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/mac/plugins/layui-v2.6.5/layui/css/layui.css">
    <link rel="stylesheet" href="/mac/plugins/bootstrap/css/bootstrap.min.css">

    <style>
        .pp{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head> 
<body>
    <%@include file="../nav/nav.jsp"%>


    <div class="container-fluid hidden-xs" style="margin-top: -20px;background-image: url(/mac/imgs/mi.webp); background-size: contain">
        <div class="row" style="height: 300px;background: rgba(1,0,0,0.4);">
            <h2 style="text-align: center;color: white">
                iMac
                <p>由内而外，焕然一新。超乎想象的纤薄设计，24 英寸 4.5K 视网膜显示屏</p>
                <p>以及 Mac 中出类拔萃的扬声器、麦克风和摄像头</p>
                <p>种种精彩，由 M1 芯片强势驱动。</p>
            </h2>
        </div>
    </div>


    <div class="container" style="margin-top: 20px">
        <div>
            <form class="bs-example bs-example-form" role="form">
                <div class="row">
                    <div class="col-md-offset-2 col-md-8">
                        <div class="input-group">
                            <input placeholder="请输入产品名称进行查询" id="searchName" name="searchName" value="${searchName}" type="text" class="form-control" style="border: 1px solid orange">
                            <span class="input-group-btn">
                                <button class="btn btn-default" style="width: 120px;background-color: orangered;color: white" type="button" onclick="search_product()" ><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</button>

                            </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </form>
        </div>

        <c:if test="${count!=null}">
        <div id="moreDiv" style="border: 1px dashed orangered;border-radius: 10px;padding-top: 15px;box-sizing: border-box" >
            <span class="text-danger">更多筛选条件</span>
            <form role="form">
                <div class="row">
                    <div class="col-md-offset-2 col-md-3">
                        <div class="form-group">
                            <select id="select_type" onchange="search_by_type(this)" class="form-control">
                                <option value="-1">===产品类型===</option>
                                <c:forEach items="${typeList}" var="t">
                                <option <c:if test="${typeId==t.id}">selected</c:if>  value="${t.id}">${t.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>最小价格</label><input id="min_price" value="${minPrice}" onblur="min_price(this)" style="width: 30%;display: inline" type="number" class="form-control">
                        <label>- 最大价格</label><input style="width: 30%;display: inline" type="number" class="form-control">
                    </div>

                </div>

            </form>
        </div>
        </c:if>
    </div>



    <div class="container-fluid" style="margin-top: 20px">
        <div class="row">
            <c:forEach items="${pageInfo.list}" var="p">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="http://localhost:80/product/${p.productImg}"
                         alt="通用的占位符缩略图">
                    <div class="caption">
                        <h3>${p.name}</h3>
                        <p style="color: red">优惠价:${p.price}&nbsp;&nbsp;&nbsp;<span class="text-primary">库存:${p.store}</span></p>
                        <p class="text-info">销量:${p.sales+10000} </p>

                        <c:if test="${user!=null}">
                            <p><span onclick="addCarts(${p.id})" class="text-danger glyphicon glyphicon-shopping-cart"></span>&nbsp;
                                <span class="glyphicon glyphicon-hand-left"></span>点击加入购物车</p>

                        </c:if>
                       <c:if test="${user!=null}">

                          <span class="glyphicon glyphicon-heart-empty"  onclick="collect(${p.id})" ></span>

<%--                           <div style="position:absolute; left:0;top:0;width: 73px; overflow: hidden;text-overflow: clip;white-space: nowrap;">--%>
<%--                               <span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>--%>
<%--                           </div>--%>
<%--                           --%>

                       </c:if>
                        <p class="pp">
                            ${p.remark}
                        </p>
                    </div>
                </div>
            </div>

            </c:forEach>
        </div>
    </div>



<%--    <ul id="ul1">--%>
<%--        <li>内容1</li>--%>
<%--        <li>内容2</li>--%>
<%--        <li>内容3</li>--%>
<%--    </ul>--%>
<%--    <ul id="ul2" style="display: none;">--%>
<%--        <li>内容a</li>--%>
<%--        <li>内容b</li>--%>
<%--        <li>内容c</li>--%>
<%--    </ul>--%>
<%--    <input type="button" value="按钮" onclick="ref();" />--%>
<%--    <script type="text/javascript">--%>
<%--        function ref() {--%>
<%--            var ul1 = document.getElementById("ul1");--%>
<%--            var ul2 = document.getElementById("ul2");--%>
<%--            if (ul1.style.display=="none") {--%>
<%--                ul1.style.display="";--%>
<%--                ul2.style.display="none";--%>
<%--            } else {--%>
<%--                ul2.style.display="";--%>
<%--                ul1.style.display="none";--%>
<%--            }--%>
<%--        }--%>
<%--    </script>--%>



   <!--引入分页的标签页-->
    <%@ include file="../common/page.jsp"%>
    <script src="/mac/plugins/layui-v2.6.5/layui/layui.js"></script>

    <script src="/mac/plugins/jquery/jquery.min.js"></script>
    <script src="/mac/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script>


        function collect(pid) {

            $.post('/mac/login/collect/add',{"pid":pid},function (data) {
                console.log(data)
                if(data.code=="200")
                {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('加入收藏成功',{icon:6});
                    });
                }
                else
                {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('加入收藏失败',{icon:6});
                    });
                }

            })

        }
        function addCarts(pid){
            $.post('/mac/login/carts/add',{"pid":pid},function(data){
                console.log(data);
                if(data.code=="200"){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('加入购物车成功',{icon:6});
                    });
                }
            })
        }

        function search_product(){
            let searchName = document.getElementById("searchName").value;
            window.location="/mac/product/index?searchName="+searchName+"&count=1";
        }

        function search_by_type(obj){
            let searchName = document.getElementById("searchName").value;
            window.location="/mac/product/index?searchName="+searchName+"&typeId="+obj.value+"&count=1";
        }

        function min_price(obj){
            let searchName = document.getElementById("searchName").value;
            let typeId = document.getElementById("select_type").value;
            window.location="/mac/product/index?searchName="+searchName+"&typeId="+typeId+"&count=1&minPrice="+obj.value;
        }

        $(function(){
            let login = ${login==null?"0":"1"};

            if(login=="1"){
                let login_a = document.getElementById("login_a");
                login_a.click();
            }
        });

    </script>
</body>
</html>
